<!DOCTYPE html>
 
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Atlas, A Creative/Freelancer's Portfolio</title>
	<link rel="stylesheet" href="css/styles.css">
	<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script src="js/jquery.ba-hashchange.min.js"></script>
	<script src="js/jquery.quicksand.js"></script>
	<script src="js/script.js"></script>
    <script type="text/javascript">
	$(function(){

        $(".dropbtn").click(function(){
            $("#dropdown").slideToggle("slow");
            $(this).toggleClass("active");
        });
        
        // Bind the event.
        $(window).hashchange( function(){
            // Alerts every time the hash changes!
            // alert( location.hash );
            loadContent(location.hash);
        })
        // Trigger the event (useful on page load).
        $(window).hashchange();
    });
	</script>
</head>

<body>
<div id="dropcontainer">
<div id="dropdown">
	<div class="container">
		<img src="images/logo.png" alt="Atlas" class="logo">
		<h3>Quick Links&#58;</h3>
		<ul>
			<li class="dmenu1"><a href="#">Forrst</a></li>
			<li class="dmenu3"><a href="#">Twitter</a></li>
			<li class="dmenu2"><a href="#">Facebook</a></li>
		</ul>

		<h4>Simply the forefront of your work&#46;&#46;&#46;showcase in style my friend&#46;</h4>
		<img src="images/avatar.jpg" alt="Name here" class="dropavatar">
		
		<h2>Yo&#44; I&#39;m Johnny Doe&#46;</h2>
		
		<p class="dpara1 dparas">Iste natus error sit voluptatem accusantium doloremque laudantium&#44; totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.&#46;Nemo enim ipsam voluptatem quia voluptas sit&#46;</p>
		<p class="dpara2 dparas">Neque porro quisquam est&#44; qui dolorem ipsum quia dolor sit amet&#44; consectetur, adipisci velit&#44; sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat&#46;</p>
		<h5 class="dropquote">&#8220;Everything is designed&#46; Few things are designed well&#8230;&#8221;</h5>
		
		<div class="dropsep"></div>
		
		<h6>Wanna Get in Touch&#63;</h6>
		<form>
			<input type="text" placeholder="Your Name&#46;&#46;&#46;">
			<input type="email" placeholder="Your Email&#46;&#46;&#46;">
			<textarea placeholder="Your Message&#46;&#46;&#46;"></textarea>
			<input type="submit" value="Submit &rarr;" class="dropsubmitbtn">
		</form>
		
	</div><!--container end-->

</div>

<a href="#" class="dropbtn "></a>

</div>

<div class="container">

	<img src="images/logo.png" alt="Atlas" class="logo">
	
	<h1 class="subtitle">Simply the forefront of your work&#46;&#46;&#46;showcase in style my friend&#46;</h1>
	
	<nav id="filter">
		
		</nav>
		<div class="portfolioseperator"></div>
        <div class="portfolio-detail">
            <h1 class="large-title">Website : www.vinacapitalfoundation.org</h1>
            <div class="left-col box-shadow">
                <div class="content ">
                    <!-- <div class="inset">
                        <img class="aligncenter full-wide" src="http://lehoaian.info/lhablog/wp-content/uploads/2012/12/thumb-490x201.jpg" alt="">
                    </div> -->
                    <img src="http://lehoaian.info/lhablog/wp-content/uploads/2012/12/thumb.jpg" alt="" class="full-wide">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum debitis inventore culpa aut omnis ea aliquam labore est corrupti accusamus sequi veritatis quaerat minima error nisi cum distinctio blanditiis molestias!</p>
                        <p>Placeat vitae id itaque animi veritatis obcaecati fuga eum voluptates quo ipsa et ut ab voluptate consequatur distinctio iste autem pariatur quas suscipit aut tempora illo ullam eligendi accusantium quos.</p>
                    
                    <p>
                    
                    Quia tenetur earum illo ex esse nobis totam modi saepe placeat omnis at corrupti facilis nesciunt consequuntur inventore. Ut tempora inventore accusamus amet eligendi molestiae eius vitae itaque nihil facilis.</p>
                </div>
            </div>
            <div class="right-col">
                <div class="box">
                    <a href="" class="button profile-btn">Visit live site</a> <br>
                    <a href="" class="button profile-btn">Checkout my oDesk Profile</a>
                </div>
                <div class="box">
                    <h2>Features</h2>
                    <ul id="features">
                        <li><em></em><a href="http://siteorigin.com/themes/minimal-2/">Minimal</a></li>
                        <li><em></em><a href="http://siteorigin.com/themes/portfolio/">Portfolio</a></li>
                        <li><em></em><a href="http://siteorigin.com/themes/portfolio/">WordPress</a></li>
                        <li><em></em><a href="http://siteorigin.com/themes/portfolio/">Ajax</a></li>
                        <li><em></em><a href="http://siteorigin.com/themes/portfolio/">Seo</a></li>
                        <li><em></em><a href="http://siteorigin.com/themes/portfolio/">Carousel</a></li>
                    </ul>
                </div>
                <div class="box">
                    <h2>Gallery</h2>
                    <ul id="gallery">
                        <li data-tags="Web Design,Video" data-id="5">
                            <a href="#"><img class="box-shadow" src="images/portfolio/work6.png" alt=""></a>
                        </li>
                        <li data-tags="Web Design,Video" data-id="5">
                            <a href="#"><img class="box-shadow" src="images/portfolio/work6.png" alt=""></a>
                        </li>
                        <li data-tags="Web Design,Video" data-id="5">
                            <a href="#"><img class="box-shadow" src="images/portfolio/work6.png" alt=""></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
		<div class="footerseperator"></div>
		<footer>
			<h1>&copy; Copyright 2011 Atlas&#46;</h1>
			<h2>Atlas HTML Theme by <a href="http://purtypixels.com" title="PurtyPixels">Purty Pixels</a></h2>
			<h3>Send me a <a href="#" title="Twitter">tweet</a> or become a fan on <a href="#" title="Facebook">facebook</a></h3>
		</footer>
</div><!--container end-->

</body>
</html>